<template>
<div class="print">
    <div class="paper" v-for=" (item, index) in drawQr" :key="index">
        <div class="qrcode">
            <div :id="'qrcode'+index"></div>
            <div style="padding-left:10px;flex:1;overflow:hidden;">
                <div style="font-weight:bold;">{{item.procCode}}</div>
                <div>{{item.workerName || item.teamName}}</div>
                <div>{{item.productionWeek}}</div>
            </div>
        </div>
        <!-- <div style="font-size:20px;padding-top:30px;text-align:center;height:50%;"></div> -->
		<div class="info">
			<div>条码：{{item.barcode}}</div>
			<div>{{item.materialName}}</div>
			<div :style="item.class">{{item.materialCode}}</div>
		</div>
    </div>
</div>
</template>

<script>
import QRcode from "qrcodejs2"

export default {
    components: {
        // barcode: VueBarcode
    },
    props: {
        drawQr: {
            type: Array,
            default: []
        },
    },
    created() {},
    mounted() {},
    data() {
        return {}
    },
    methods: {
        qrcode() {
            this.drawQr.map((x, index) => {
                document.getElementById(`qrcode${index}`).innerHTML = '';
                let qrcode = new QRcode(`qrcode${index}`, {
                    width: 75,
                    height: 75,
                    text: `${x.barcode}`
                });
            });
        },
    },
    watch: {
        drawQr: {
            handler(newVal) {
                if (newVal) {
                    this.$nextTick(() => {
                        this.qrcode();
                    })
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@page {
    size:60mm 40mm !important;
    margin:0;
}
.print {
	width:100%;
	height:100%;
	.paper{
		width:100%;
		height:100%;
		display:flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
        font-size:10px;
        line-height: 16px;
        white-space: normal;
        word-break: break-all;
		.qrcode{
            box-sizing: border-box;
			display:flex;
			align-items: center;
			justify-content: center;
			margin-bottom:10px;
		}
		.info{
			text-align: center;
            font-size:6px;
            line-height: 15px;
		}
	}
}
</style>
